<template>
	<el-row class="container">
		<!--头部-->
		<el-col :span="24" class="topbar-wrap">
			<div class="topbar-logo topbar-btn">
				<a href="/"><img src="@/assets/logo.jpg" style="padding-left:8px;"></a>
			</div>
			<div class="topbar-logos" v-show="!collapsed">
				<a href="/"><img src="@/assets/logotxt.jpg"></a>
			</div>

			<div class="topbar-title">
				<span style="font-size: 18px;color: #fff;">U智远程教育平台-学生端</span>
			</div>

			<!-- 右上角 -->
			<div class="topbar-account topbar-btn">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><i class="iconfont icon-user"></i>{{ nickname }}  <i
            class="iconfont icon-down"></i></span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>
							<span style="color: #555;font-size: 14px;" @click="showStuInfo">个人信息</span>
						</el-dropdown-item>
						<el-dropdown-item>
							<span style="color: #555;font-size: 14px;" @click="editPasswordVisible = true">修改密码</span>
						</el-dropdown-item>
						<el-dropdown-item divided @click.native="logoutUser">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
		</el-col>

		<!--中间-->
		<el-col :span="24" class="main">
			<!--左侧导航-->
			<aside :class="{showSidebar:!collapsed}">
				<!--展开折叠开关-->
				<div class="menu-toggle" @click.prevent="collapse">
					<i class="iconfont icon-menufold" v-show="!collapsed"></i>
					<i class="iconfont icon-menuunfold" v-show="collapsed"></i>
				</div>
				<!--导航菜单-->
				<el-menu default-active="0" router :collapse="collapsed">
					<template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
						<el-submenu v-if="!item.leaf" :index="index+''">
							<template slot="title"><i :class="item.iconCls"></i><span style="color: red;" slot="title">{{item.name}}</span></template>
							<el-menu-item v-for="term in item.children" :key="term.path" :index="term.path" v-if="term.menuShow" :class="$route.path==term.path?'is-active':''">
								<i :class="term.iconCls"></i><span slot="title">{{term.name}}</span>
							</el-menu-item>
						</el-submenu>
						<el-menu-item v-else-if="item.leaf&&item.children&&item.children.length" :index="item.children[0].path" :class="$route.path==item.children[0].path?'is-active':''">
							<i :class="item.iconCls"></i><span style="color: #C71585;" slot="title">{{item.children[0].name}}</span>
						</el-menu-item>
					</template>
				</el-menu>
			</aside>

			<!--右侧内容区-->
			<!-- 上面导航  面包屑 -->
			<section class="content-container">
				<div style="height:50px">
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item v-for="item in $route.matched" :key="item.name">
							<el-breadcrumb-item v-if="item.name == '主页'" :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item v-else :to="item.path">{{ item.name }}</el-breadcrumb-item>
						</el-breadcrumb-item>
					</el-breadcrumb>
				</div>

				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
		<!--点击个人信息弹出该对话框 -->
		<el-dialog title="个人信息" :visible.sync="showStuInfoVisible">
			<el-form :model="stuInfoForm">
				<el-form-item label="姓名" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherRealname" ></el-input>
				</el-form-item>
				<el-form-item label="性别" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherSex" ></el-input>
				</el-form-item>
				<el-form-item label="民族" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherNational" ></el-input>
				</el-form-item>
				<el-form-item label="学历" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherRecord" ></el-input>
				</el-form-item>
				<el-form-item label="邮箱" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherEmail" ></el-input>
				</el-form-item>
				<el-form-item label="电话" >
					<el-input style="width: 500px;" v-model="stuInfoForm.teacherPhone" ></el-input>
				</el-form-item>
				
			</el-form>
		</el-table>
		</el-dialog>
		<!-- 修改密码 -->
		<el-dialog title="个人信息" :visible.sync="editPasswordVisible">
			<el-form :model="ruleForm2" status-icon :rules="rulesPass" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
				<el-form-item label="原密码" prop="prePass">
					<el-input type="password" v-model="ruleForm2.prePass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="pass">
					<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitEditPassForm">提交</el-button>
					<el-button @click="resetForm('ruleForm2')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</el-row>
</template>

<script>
	import { bus } from '@/common/js/bus.js'
	import { modfiyPwd, logout, requestLogin } from '@/axios/api'
	export default {
		name: 'homegu',
		created() {
			bus.$on('setNickName', (text) => {
				this.nickname = text;
			})

			bus.$on('goto', (url) => {
				if(url === "/login") {
					localStorage.removeItem('teacher-user');
				}
				this.$router.push(url);
			})
		},
		data() {
			var validatePrePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('原密码不能为空'));
				} else {
					
					let loginParams = {
						teacherId:this.stuInfoForm.teacherId ,
						teacherPwd: this.ruleForm2.prePass
					};
					console.log(loginParams);
					requestLogin(loginParams).then(res => {

						if(res.status == 200) {
							callback()
						} else {
							callback(new Error('原密码错误'));
						}
					})
				}
			};
			var validatePass = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入密码'));
				} else {
					if(this.ruleForm2.checkPass !== '') {
						this.$refs.ruleForm2.validateField('checkPass');
					}
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请再次输入密码'));
				} else if(value !== this.ruleForm2.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				if(!value) {
					return callback(new Error('邮箱不能为空'));
				}
				callback();
			};
			var validatePhone = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('手机号不能为空'));
				}
				callback();
			};
			return {
				ruleForm2: {
					pass: '',
					checkPass: '',
					prePass: ''
				},
				rulesPass: {
					prePass: [{
						validator: validatePrePass,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}]
				},
				editPasswordVisible: false,
				isPhoneHidden: true,
				isEmailHidden: true,
				isInputEmailHidden: false,
				isInputPhoneHidden: false,
				stuInfoForm: {
					
					
					
				},
				nickname: '',
				collapsed: false,
				showStuInfoVisible: false,
				rules2: {
					studentEmail: [{
						validator: validateEmail,
						trigger: 'blur'
					}],
					studentPhone: [{
						validator: validatePhone,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			/*修改密码*/
			submitEditPassForm() {
				let loginParams = {
					teacherId: this.stuInfoForm.teacherId,
					teacherPwd: this.ruleForm2.pass
				};
				console.log(loginParams);
				modfiyPwd(loginParams).then(res => {

					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.editPasswordVisible=false;
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
				});

			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			hiddenChange1() {
				this.isEmailHidden = false,
					this.isInputEmailHidden = true

			},
			hidddenChange2() {
				this.isPhoneHidden = false,
					this.isInputPhoneHidden = true
			},
			handleOpen() {
				//console.log('handleopen');
			},
			handleClose() {
				//console.log('handleclose');
			},
			//折叠导航栏
			collapse: function() {
				this.collapsed = !this.collapsed;
			},
			showMenu(i, status) {
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-' + i)[0].style.display = status ? 'block' : 'none';
			},

			/*显示个人信息*/
			showStuInfo() {
				let user = localStorage.getItem('teacher-user');
				if(user) {
					user = JSON.parse(user);
					console.log(user.teacherId);
				}
				
				console.log(user.teacherId);	
				this.stuInfoForm = user;
				console.log(this.stuInfoForm);
				console.log(this.stuInfoForm.teacherId);
				this.showStuInfoVisible = true;

			},
			/*submitForm(stuInfoForm) {
			  this.$refs[stuInfoForm].validate((valid) => {
			    let params = {studentEmail: stuInfoForm.studentEmail,studentPhone: stuInfoForm.studentPhone};
			    if (valid) {
			      TeachermanageUp(params).then(res => {
			        let {status, message} = res ;
			        if (res.status == 200) {
			          this.$message({
			            message: message,
			            type: 'success'
			          });
			          this.showStuInfoVisible= false;

			        } else {
			            this.$message.error('修改失败');
			        }
			      })
			    } else {
			      console.log('error submit!!');
			      return false;
			    }
			  })
			},*/

			/*退出*/
			logoutUser() {
				let that = this;
				this.$confirm('确认退出吗?', '提示', {
					confirmButtonClass: 'el-button--warning'
				}).then(() => {
					//确认
					that.loading = true;
					logout().then((res) => {
						let {
							status,
							message
						} = res;
						if(status == 200) {
							that.loading = false;
							localStorage.removeItem('teacher-user');
							that.$router.go('/login'); //用go刷新
							this.$message({
								message: '您已成功退出',
								type: 'success'
							});
						} else {
							this.$message.error('500:退出失败');
						}
					}, function(err) {
						that.loading = false;
						that.$message.error({
							showClose: true,
							message: err.toString(),
							duration: 2000
						});
					}).catch(function(error) {
						that.loading = false;
						console.log(error);
						that.$message.error({
							showClose: true,
							message: '请求出现异常',
							duration: 2000
						});
					});
				});
			}
		},
		mounted() {
			let user = localStorage.getItem('teacher-user');
			if(user) {
				user = JSON.parse(user);
				this.nickname = user.teacherRealname || '';
			}
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.topbar-wrap {
			height: 50px;
			line-height: 50px;
			background: #373d41;
			padding: 0px;
			.topbar-btn {
				color: #fff;
			}
			/*.topbar-btn:hover {*/
			/*background-color: #4A5064;*/
			/*}*/
			.topbar-logo {
				float: left;
				width: 59px;
				line-height: 26px;
			}
			.topbar-logos {
				float: left;
				width: 120px;
				line-height: 26px;
			}
			.topbar-logo img,
			.topbar-logos img {
				height: 40px;
				margin-top: 5px;
				margin-left: 2px;
			}
			.topbar-title {
				float: left;
				text-align: left;
				width: 250px;
				padding-left: 10px;
				border-left: 1px solid #000;
			}
			.topbar-account {
				float: right;
				padding-right: 12px;
			}
			.userinfo-inner {
				cursor: pointer;
				color: #fff;
				padding-left: 10px;
			}
		}
		.main {
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			position: absolute;
			top: 50px;
			bottom: 0px;
			overflow: hidden;
		}
		aside {
			min-width: 50px;
			background: #333744;
			&::-webkit-scrollbar {
				display: none;
			}
			&.showSidebar {
				overflow-x: hidden;
				overflow-y: auto;
			}
			.el-menu {
				height: 100%;
				/*写给不支持calc()的浏览器*/
				height: -moz-calc(100% - 80px);
				height: -webkit-calc(100% - 80px);
				height: calc(100% - 80px);
				border-radius: 0px;
				background-color: #333744;
			}
			.el-submenu .el-menu-item {
				min-width: 60px;
			}
			.el-menu {
				width: 180px;
			}
			.el-menu--collapse {
				width: 60px;
			}
			.el-menu .el-menu-item,
			.el-submenu .el-submenu__title {
				height: 46px;
				line-height: 46px;
			}
			.el-menu-item:hover,
			.el-submenu .el-menu-item:hover,
			.el-submenu__title:hover {
				background-color: #C6E2FF;
			}
		}
		.menu-toggle {
			background: #4A5064;
			text-align: center;
			color: white;
			height: 26px;
			line-height: 30px;
		}
		.content-container {
			background: #fff;
			flex: 1;
			overflow-y: auto;
			padding: 10px;
			padding-bottom: 1px;
			.content-wrapper {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
</style>